<template>
	<view>
		<view class="flex justify-between margin-sm">
			<view class="cuIcon-refresh text-gray text-lg" @tap="listLinkageCondition()"><text
					class="margin-left-xs">{{$t('condition')}}</text></view>
			<view class="flex margin-right">
				<view class="cuIcon-add" :style="{color:themeConfig.primaryColor}" @tap="showAdd">
					{{$t('add')}}
				</view>
				<view class="cuIcon-check margin-left-sm"
					:style="{color:haveChange?themeConfig.primaryColor:'#aaaaaa'}" @tap="save">
					{{$t('save')}}
				</view>
			</view>
		</view>
		<view v-for="(condition,index) in conditionList" :key="index"
			style="height: 80px;"
			class="bg-white padding-sm margin-sm flex justify-between align-center common-box" @tap="edit(condition)">
			<view v-if="condition.type === 't2'" class=" flex align-center">
				<view class="margin-sm cuIcon-countdown" style="font-size: 20px;"></view>
				<view>
					<view class="flex text-lg">
						<view class="text-bold margin-right-sm">{{$t('time')}}</view>
						<view v-if="condition.allDay == 0">{{condition.timer}}</view>
						<view v-else>{{$t('allDay')}}</view>
					</view>
					<view class="flex margin-top-xs text-sm">
						<view class="margin-right-sm" v-for="(item,index) in condition.dayList" :key="index">
							<view class='cu-tag' :class="'bg-' + themeConfig.theme">
								{{item}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="condition.type === 's'" class=" flex align-center">
				<image :src="condition.iconUrl" style="width: 20px;height: 20px;" class="margin-sm"></image>
				<view>
					<view class="text-xl">
						<text
							class="text-bold margin-right-sm">{{formatSensorType(condition.sensorType)}}{{$t('port')}}:{{condition.port}}</text>
						<text v-if="condition.sensorName">[ {{condition.sensorName}} ]</text>
					</view>
					<view class="text-gray margin-top-xs text-sm">
						<text>{{ condition.name }}</text>
						<text class="margin-left-xs">
							{{ formatterLogic(condition.logic) }}
						</text>
						<text class="margin-left-xs">{{condition.rawValue}}</text>
					</view>
				</view>
			</view>
			<view v-else-if="condition.type === 'set'" class=" flex align-center">
				<image :src="condition.iconUrl" style="width: 20px;height: 20px;" class="margin-sm"></image>
				<view>
					<view>
						<text
							class="text-bold margin-right-sm">{{formatSensorType(condition.sensorType)}}{{$t('port')}}:{{condition.port}}</text>
						<text v-if="condition.sensorName">[ {{condition.sensorName}} ]</text>
					</view>
					<view class="text-gray margin-top-xs text-xs">
						<text>{{ condition.name }}</text>
						<text class="margin-left-xs">
							{{ formatterLogic(condition.logic) }}
						</text>
						<text class="margin-left-xs">{{condition.rawValue}}</text>
					</view>
				</view>
			</view>
			<view v-else>{{$t('unKnow')}}</view>
			<view  class="flex">
				<view class="cuIcon-delete text-pink margin-right-sm" @tap.stop="deleteItem(index)"></view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="editDialog?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-gray" @tap="editDialog = false">{{$t('cancel')}}</view>
					<view class="action" :style="{color : themeConfig.primaryColor}" @tap="editSave">{{$t('confirm')}}
					</view>
				</view>
				<view>
					<form>
						<view class="cu-form-group">
							<view class="title">{{$t('type')}}</view>
							<view class='flex'>
								<view  v-for="(item,index) in typeList" :key="index">
									<view class="margin-right-sm" @tap="typeChange(item)" v-if="item.value !=='t2' || !t2Disable ">
									<view v-if="item.value === condition.type" class='cu-tag'
										:class="'bg-' + themeConfig.theme">
										{{item.label}}
									</view>
									<view v-else class='cu-tag' :class="'line-' + themeConfig.theme">
										{{item.label}}
									</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="condition.type === 't2'">
							<view class="cu-form-group">
								<view class="title">{{$t('allDay')}}</view>
								<radio-group class="block" @change="allDayChange">
									<radio class='radio'
										:class="[themeConfig.theme,condition.allDay === 1?'checked':'']"
										:checked="condition.allDay === 1" :value="1"></radio><text
										class="margin-left-xs">{{$t('allDay')}}</text>
									<radio class='radio margin-left-sm'
										:class="[themeConfig.theme,condition.allDay === 0?'checked':'']"
										:checked="condition.allDay === 0" :value="0"></radio><text
										class="margin-left-xs">{{$t('timeSlot')}}</text>
								</radio-group>
							</view>
							<view class="cu-form-group" v-if="condition.allDay === 0">
								<view class="title">{{$t('timeSlot')}}</view>
								<view>
									<picker mode="multiSelector" :value="timeSlotMultiIndex" :range="timeSlotMultiArray"
										@change="timerSlotChange">
										<view>{{condition.timer}}</view>
									</picker>
								</view>
							</view>
							<view class="cu-form-group">
								<checkbox-group class="block" @change="dayChange">
									<checkbox class='round' v-for="(day,dayIndex) in dayList" :key="dayIndex"
										:class="[themeConfig.theme,condition.dayList.indexOf(day.value) !== -1?'checked':'']"
										:checked="condition.dayList.indexOf(day.value) !== -1" :value="day.value">
										<text class="margin-left-xs margin-bottom-sm">{{day.label}}</text>
									</checkbox>
								</checkbox-group>
							</view>
						</view>
						<view v-else-if="condition.type === 's'">
							<view class="cu-form-group">
								<view class="title">{{$t('sensor')}}</view>
								<picker mode="multiSelector" @columnchange="explainMultiColumnChange"
									@change="explainMultiChange" :value="explainMultiIndex" :range="explainMultiArray">
									<view class="picker text-sm">
										{{explainMultiArray[0][explainMultiIndex[0]]}}，{{explainMultiArray[1][explainMultiIndex[1]]}}
									</view>
								</picker>
							</view>
							<view class="cu-form-group">
								<view class="title">{{$t('logic')}}</view>
								<view class="flex">
									<view  v-for="(item,index) in logicList" :key="index">
										<view class="margin-right-sm" @tap="logicChange(item)">
											<view v-if="item.value === condition.logic" class='cu-tag'
												:class="'bg-' + themeConfig.theme">
												{{item.label}}
											</view>
											<view v-else class='cu-tag' :class="'line-' + themeConfig.theme">
												{{item.label}}
											</view>
										</view>
										
									</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">{{$t('value')}}</view>
								<input v-model="condition.rawValue" />
							</view>
						</view>
						<view v-else-if="condition.type === 'set'">
							<view class="cu-form-group">
								<view class="title">{{$t('setting')}}</view>
								<picker mode="multiSelector" @columnchange="settingMultiColumnChange"
									@change="settingMultiChange" :value="settingMultiIndex" :range="settingMultiArray">
									<view class="picker text-sm">
										{{settingMultiArray[0][settingMultiIndex[0]]}}，{{settingMultiArray[1][settingMultiIndex[1]]}}
									</view>
								</picker>
							</view>
							<view class="cu-form-group">
								<view class="title">{{$t('logic')}}</view>
								<view class="flex">
									<view class="margin-right-sm" v-for="(item,index) in logicList" :key="index"
										@tap="logicChange(item)">
										<view v-if="item.value === condition.logic" class='cu-tag'
											:class="'bg-' + themeConfig.theme">
											{{item.label}}
										</view>
										<view v-else class='cu-tag' :class="'line-' + themeConfig.theme">
											{{item.label}}
										</view>
									</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">{{$t('value')}}</view>
								<input v-model="condition.rawValue" />
							</view>
						</view>
					</form>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import *
	as deviceSensorApi from '@/api/iot/iotDeviceSensorApi.js'
	import *
	as deviceLinkageConditionApi from '@/api/iot/iotDeviceLinkageConditionApi.js'
	import {
		formatSensorType
	} from '@/util/dataUtil.js'
	const hours = [];
	const minutes = [];
	const thours = [];
	const tminutes = [];
	for (let i = 0; i < 24; i++) {
		let n = i + ''
		hours[i] = n[1] ? n : '0' + n
	}
	for (let i = 0; i < 60; i++) {
		let n = i + ''
		minutes[i] = n[1] ? n : '0' + n
	}
	for (let i = 0; i < 24; i++) {
		let n = i + ''
		thours[i] = n[1] ? n : '0' + n
	}
	for (let i = 0; i < 60; i++) {
		let n = i + ''
		tminutes[i] = n[1] ? n : '0' + n
	}

	export default {
		name: 'LinkageCondition',
		props: {
			linkage: {
				type: Object,
				default: null
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		data() {
			return {
				condition: {},
				conditionList: [],
				sensorList: [],
				logicList: [],
				typeList: [],
				editDialog: false,
				timeSlotMultiArray: [hours, minutes, thours, tminutes],
				timeSlotMultiIndex: [0, 0, 0, 0],
				explainMultiIndex: [0, 0],
				explainMultiArray: [],
				settingMultiIndex: [0, 0],
				settingMultiArray: [],
				dayList: [],
				isEdit: false,
				haveChange: false,
				t2Disable: false
			}
		},
		created() {
			this.logicList = [{
					label: this.$t('greater'),
					value: '>'
				},
				{
					label: this.$t('equal'),
					value: '='
				},
				{
					label: this.$t('less'),
					value: '<'
				},
			]
			this.typeList = [{
				label: this.$t('timeSlot'),
				value: 't2'
			}, {
				label: this.$t('sensor'),
				value: 's'
			}, {
				label: this.$t('setting'),
				value: 'set'
			}, ]
			this.dayList = [{
					label: this.$t('week') + 7,
					value: '7'
				}, {
					label: this.$t('week') + 1,
					value: '1'
				}, {
					label: this.$t('week') + 2,
					value: '2'
				},
				{
					label: this.$t('week') + 3,
					value: '3'
				},
				{
					label: this.$t('week') + 4,
					value: '4'
				},
				{
					label: this.$t('week') + 5,
					value: '5'
				},
				{
					label: this.$t('week') + 6,
					value: '6'
				}
			]
			this.listSensorWithExplain()
		},
		methods: {
			formatSensorType(type) {
				return formatSensorType(this, type)
			},
			allDayChange(e) {
				this.condition.allDay = parseInt(e.detail.value)
			},
			dayChange(e) {
				let day = ''
				for (const item of e.detail.value) {
					day = day + item
				}
				this.condition.day = day
			},
			sensorChange(i) {
				const sensor = this.sensorList[i]
				const explainList = []
				for (const expalin of sensor.explainList) {
					explainList.push(expalin.name)
				}
				this.explainMultiArray.splice(1, 1, explainList)

				const settingList = []
				for (const setting of sensor.settingList) {
					settingList.push(setting.name)
				}
				this.settingMultiArray.splice(1, 1, settingList)
			},
			timerSlotChange(e) {
				const index = e.detail.value;
				const hour = this.timeSlotMultiArray[0][index[0]]
				const minute = this.timeSlotMultiArray[1][index[1]]
				const thour = this.timeSlotMultiArray[2][index[2]]
				const tminute = this.timeSlotMultiArray[3][index[3]]
				this.condition.timer = hour + ':' + minute + ' / ' + thour + ':' + tminute
			},
			explainMultiChange(e) {
				this.explainMultiIndex = e.detail.value
			},
			explainMultiColumnChange(e) {
				if (e.detail.column === 0) {
					this.sensorChange(e.detail.value)
				}
			},
			settingMultiChange(e) {
				this.settingMultiIndex = e.detail.value
			},
			settingMultiColumnChange(e) {
				if (e.detail.column === 0) {
					this.sensorChange(e.detail.value)
				}
			},
			logicChange(item) {
				this.condition.logic = item.value
			},
			typeChange(item) {
				switch (item.value) {
					case 't2':
						this.condition.allDay = 0
						this.condition.dayList = []
						this.condition.timer = '00:00 / 00:00'
						this.timeSlotMultiIndex = [0, 0, 0, 0]
						break
					case 's':
						this.condition.port = '0'
						this.condition.keyName = ''
						this.condition.logic = '>'
						this.condition.rawValue = ''
						this.sensorChange(0)
						this.explainMultiIndex = [0, 0]
						break
					case 'set':
						this.condition.port = '0'
						this.condition.keyName = ''
						this.condition.logic = '>'
						this.condition.rawValue = ''
						this.sensorChange(0)
						this.settingMultiIndex = [0, 0]
						break
					default:
						showToast(this.$t('failure'), 'none', 1000, false) //操作失败
				}
				this.condition.type = item.value
			},
			showAdd() {
				for (let i = 0; i < this.conditionList.length; i++) {
					if (this.conditionList[i].type === 't2') {
						this.t2Disable = true
						break
					}
				}
				this.condition = {
					type: 's',
					port: '',
					keyName: '',
					logic: '>',
					value: '',
					rawValue: '',
					timer: null,
					dayList: null,
					allDay: null,
					conditionId: 'a' + this.conditionList.length
				}
				this.explainMultiIndex = [0, 0]
				this.sensorChange(0)
				this.editDialog = true
				this.isEdit = false
			},
			edit(item) {
				switch (item.type) {
					case 't2':
						this.t2Disable = false
						if (item.timer.indexOf(' / ') != -1) {
							const timeValue = item.timer.split(' / ');
							const fvalue = timeValue[0].split(':');
							const svalue = timeValue[1].split(':');
							this.timeSlotMultiIndex = fvalue.concat(svalue)
							// item.value = fvalue.map(this.formatNumber).join(':') + ' / ' + svalue.map(this.formatNumber).join(':')
						} else {
							this.timeSlotMultiIndex = [0, 0, 0, 0]
						}
						break
					case 's':
						for (let i = 0; i < this.conditionList.length; i++) {
							if (this.conditionList[i].type === 't2') {
								this.t2Disable = true
								break
							}
						}
						const explainList = []
						for (const i in this.sensorList) {
							const sensor = this.sensorList[i]
							if (item.port === sensor.port) {
								for (const expalin of sensor.explainList) {
									explainList.push(expalin.name)
								}
								this.explainMultiArray[1] = explainList
								for (const j in sensor.explainList) {
									const explain = sensor.explainList[j]
									if (explain.keyName === item.keyName) {
										this.explainMultiIndex = [i, j]
										break
									}
								}
								break
							}
						}
						break
					case 'set':
						for (let i = 0; i < this.conditionList.length; i++) {
							if (this.conditionList[i].type === 't2') {
								this.t2Disable = true
								break
							}
						}
						const settingList = []
						for (const i in this.sensorList) {
							const sensor = this.sensorList[i]
							if (item.port === sensor.port) {
								for (const setting of sensor.settingList) {
									settingList.push(expalin.name)
								}
								this.settingMultiArray[1] = settingList
								for (const j in sensor.settingList) {
									const setting = sensor.settingList[j]
									if (setting.keyName === item.keyName) {
										this.settingMultiIndex = [i, j]
										break
									}
								}
								break
							}
						}
						break
				}
				this.condition = item
				this.editDialog = true
				this.isEdit = true
			},
			editSave() {
				let sensor
				switch (this.condition.type) {
					case 's':
						sensor = this.sensorList[this.explainMultiIndex[0]]
						this.condition.port = sensor.port
						this.condition.keyName = sensor.explainList[this.explainMultiIndex[1]].keyName
						break
					case 'set':
						sensor = this.sensorList[this.settingMultiIndex[0]]
						this.condition.port = sensor.port
						this.condition.keyName = sensor.settingList[this.settingMultiIndex[1]].keyName
						break
				}
				if (this.isEdit) {
					for (const i in this.conditionList) {
						const condition = this.conditionList[i]
						if (condition.conditionId === this.condition.conditionId) {
							this.conditionList.splice(i, 1, this.formatterCondition(this.condition))
							break
						}
					}
				} else {
					this.conditionList.push(this.formatterCondition(this.condition))
				}
				this.editDialog = false
				this.haveChange = true
			},
			save() {
				if (this.linkage.type === 'device') {
					deviceLinkageConditionApi.insertOrUpdateLinkageConditionToDevice({
						linkageId: this.linkage.linkageId,
						conditionList: this.conditionList
					}).then(res => {
						const {
							data
						} = res
						this.haveChange = false
						this.listLinkageCondition()
					})
				} else if (this.linkage.type === 'server') {
					deviceLinkageConditionApi.insertOrUpdateLinkageConditionToServer({
						linkageId: this.linkage.linkageId,
						conditionList: this.conditionList
					}).then(res => {
						const {
							data
						} = res
						this.haveChange = false
						this.listLinkageCondition()
					})
				} else {
					showToast(this.$t('failure'), 'none', 1000, false) //操作失败
				}

			},
			deleteItem(index) {
				this.conditionList.splice(index, 1)
				this.haveChange = true
			},
			formatterLogic(logic) {
				for (const item of this.logicList) {
					if (item.value === logic) {
						return item.label
					}
				}
			},
			formatterCondition(condition) {
				if (condition.type === 's') {
					for (const sensor of this.sensorList) {
						if (sensor.port === condition.port) {
							for (const explain of sensor.explainList) {
								if (condition.keyName === explain.keyName) {
									condition.name = explain.name
									condition.iconUrl = explain.iconUrl
									condition.sensorName = sensor.sensorName
									condition.sensorType = sensor.type
									return condition
								}
							}
						}
					}
				} else if (condition.type === 'set') {
					for (const sensor of this.sensorList) {
						if (sensor.port === condition.port) {
							for (const setting of sensor.settingList) {
								if (condition.keyName === setting.keyName) {
									condition.name = setting.name
									condition.iconUrl = setting.iconUrl
									condition.sensorName = sensor.sensorName
									condition.sensorType = sensor.type
									return condition
								}
							}
						}
					}
				} else if (condition.type === 't2') {
					condition.dayList = condition.day ? condition.day.split('') : []
				}
				return condition
			},
			listLinkageCondition() {
				deviceLinkageConditionApi.listLinkageCondition({
					linkageId: this.linkage.linkageId
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const conditionList = []
						for (const condition of data) {
							conditionList.push(this.formatterCondition(condition))
						}
						this.conditionList = conditionList
					}
				})
			},
			listSensorWithExplain() {
				deviceSensorApi.listSensorWith({
					deviceId: this.linkage.deviceId,
					withExplain: true,
					withSetting: true,
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const sensorList = []
						const sensorNameList = []
						for (const sensor of data) {
							sensorNameList.push(this.formatSensorType(sensor.type) + this.$t('port') + ':' +
								sensor.port + ' ' + sensor.sensorName)
							sensorList.push(sensor)
						}
						this.explainMultiArray[0] = sensorNameList
						this.settingMultiArray[0] = sensorNameList
						this.sensorList = sensorList
						this.sensorChange(0)
					} else {
						this.sensorList = []
					}
					this.listLinkageCondition()
				})
			},
		}
	}
</script>
<style>
</style>
